De tabla de cotizaciones a un inicio que enseña.
Rediseño de producto · Cocos Capital
Cocos resuelve muy bien al inversor que ya opera, pero deja afuera al usuario nuevo. El inicio es una tabla de activos sin contexto: no educa, no jerarquiza y no comunica el valor real del producto.
Meta de diseñoQue una persona sin conocimientos financieros entienda qué hacer en los primeros segundos, sin sentirse perdida.
Este desafío me consiguió el trabajo. Ya adentro, trabajé como la primera diseñadora in-house de Cocos Capital — lancé el Dólar MEP 24/7 y el módulo de cripto.
Qué encontré al abrir la app.
Recorrí el flujo de un usuario que recién se abre cuenta. El inicio muestra todo de golpe y no acompaña la primera decisión: invertir.
Un inicio que muestra todo, pero no explica nada: el que no sabe de inversiones no sabe por dónde empezar.
Claridad para el usuario nuevo
Cero onboarding. La pantalla asume que ya sabés operar, y el rojo del botón "Venta" connota error donde debería haber una acción neutral.
Consistencia y estándares
Nombres mezclados ES/EN entre mobile y web (Wallet / Home / Mercado). La jerarquía visual es débil: todo pesa lo mismo.
Ayuda y prevención de errores
Sin FAQ, sin aviso de cierre de mercado y sin comunicar productos de valor como Cocos Gold. El usuario queda solo.
Primero el valor, después la tabla.
Miré cómo lo resuelven las apps líderes —Public, Robinhood, Raiz, Thndr—. Todas explican el valor y educan antes de mostrar una grilla de activos. Tomé tres principios como eje del rediseño:
Educar
El inicio enseña antes de pedir una decisión.
- Onboarding y tooltips por activo
- Bloques Métricas y Rendimientos
- Cocos University integrada
Dar jerarquía y consistencia
Una sola acción primaria por pantalla y nomenclatura unificada en todas las plataformas.
Comunicar valor
Destacar Cocos Gold y el diferencial del producto en el primer scroll.
-
Accesos rápidos
DepositarDólar MEPCompra rápida
-
Mercado
OperarMétricas
-
Billetera
Movimientos
-
Mi perfil
ConfiguraciónRendimientos
-
Cocos University
CursosGlosario
-
Productos
Cocos Gold
El rediseño, pantalla por pantalla.
Cada pantalla, comparada lado a lado: el inicio original frente al rediseño.
De una pared de datos a una experiencia guiada.
El inicio original mostraba todos los activos de una vez, sin contexto ni jerarquía. El rediseño prioriza la educación y el descubrimiento antes de mostrar los números.
Los accesos directos al frente — Depositar, Dólar MEP y Compra Rápida son las primeras decisiones que necesita tomar un usuario nuevo.
Cocos University aparece en el inicio — Los usuarios pueden entender qué hace cada producto antes de usarlo.
Cocos Gold aparece como producto destacado, no enterrado en una pestaña — Producto de alto valor con alta visibilidad.
Un inicio que orienta antes de abrumar.
El inicio mobile original abría con una lista cruda de activos sin orientación. El rediseño abre con contexto, accesos directos y un camino claro hacia la primera acción.
El banner informativo reemplaza la lista de tickers como primer elemento — Contexto del mercado antes que datos del mercado.
3 botones de acceso directo con etiquetas claras — Reemplazan la barra de iconos sin texto del original.
Las tarjetas educativas (Métricas, Rendimientos, Cocos University) — Le dan al usuario nuevo una razón para explorar, no solo una lista para scrollear.
Color que comunica acción, no error.
El original usaba rojo para 'Venta' — un color que señala peligro, no una acción de venta. El rediseño usa un toggle oscuro neutro y agrega contexto inline para que el usuario entienda qué está haciendo.
Tab Venta: estado activo oscuro/navy reemplaza el rojo — Vender es una acción, no un error.
El tipo de cambio se muestra para Venta y Compra al mismo tiempo — El usuario puede comparar antes de decidir.
Link a Cocos University en contexto — Los usuarios que no entienden el Dólar MEP reciben ayuda sin salir del flujo.
Pasos que se escanean, no bullets que hay que leer.
El original presentaba las instrucciones de depósito como una lista de bullets. El rediseño las reemplaza con una grilla de pasos iconográficos — menor carga cognitiva, comprensión más rápida.
Selector ARS/USD al inicio — La decisión de moneda es explícita desde el principio, no enterrada a mitad del flujo.
El alias COCOS.CAPITAL se muestra grande con un botón de copia en un tap — Cero ambigüedad, cero errores.
La grilla de 4 pasos con íconos reemplaza la lista de bullets — Se escanea en 3 segundos en lugar de leer 4 párrafos.
El mismo inicio, dos filosofías.
A la izquierda, una grilla de activos sin contexto. A la derecha, un hub que educa y comunica valor. Cambiá entre los dos.
Cómo usé IA sin ceder el criterio de diseño.
El rediseño original lo diseñé en Figma. Usé IA para reconstruirlo en HTML de alta fidelidad, validar cada decisión contra las heurísticas de Nielsen y elevar la presentación del caso — sin ceder la autoría del criterio de diseño.
Reconstrucción en HTML
Pasé las pantallas del rediseño original a HTML de alta fidelidad, fieles al sistema visual.
Validación heurística
Revisé cada decisión contra las heurísticas de Nielsen para validar o ajustar antes de cerrar.
Copy en rioplatense
Generé y refiné el copy en español de Argentina — cercano, claro y consistente en todas las pantallas.
Prototipo navegable
Sumé interacciones y estados para que el caso se pueda recorrer y grabar de punta a punta.